<script setup lang="ts">
// import MIcon from '@merlin-ui-vue/components/icon'
import { MIcon } from 'merlin-ui-vue'
import { ref } from 'vue';
const height = ref(window.innerHeight + "px")
</script>

<template>
    <div class="container">
        test
        <m-icon color="blue" :size="40">Hello Icon</m-icon>
        <el-icon>Hello Icon2</el-icon>
        <br />
        {{ MIcon.name }}
    </div>
</template>

<style >
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 550px;
    background-clip: content-box;
    background-position: center;
    background-origin: revert;
}

html,
body {
    margin: 0;
    padding: 0;
}
.container {
    height: v-bind(height);
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
    width: 5px;
    height: auto;
    background-color: #fff;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: inherit;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #b9b9b9;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #f0f0f0;
}
</style>
